<template>
  <div class="swiper_content flex_column">
    <div class="swiper-container" style="position: relative">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-if="listImg.length <= 0" :style="{ backgroundImage: 'url(' + default_img+ ')' }">
          <div style="width: 100%;height: 100%;background: rgba(0,0,0,0.1)"></div>
        </div>
        <div class="swiper-slide" v-if="listImg.length >0" v-for="str in listImg" :style="{ backgroundImage: 'url(' + str+ ')' }">
        </div>
      </div>
      <div class="swiper-pagination swiper-pagination-white"></div>
      <div class="marquee" style="">
        <img src="../img/laba.png">
        <p class="animate">公告：{{notice_msg}}</p>
      </div>
    </div>
  </div>
</template>

<script>
  import Swiper from 'swiper';
  import 'swiper/dist/css/swiper.min.css';
  import default_img from '../img/jszc.png';
    export default {
      props:['notice_msg'],
      data(){
        return{
          listImg:[],
          default_img:default_img
        }
      },
      mounted() {
        this.initAd();
      },
      methods: {
        initAd: function () {
          var login = this.getCache('login_key');
          if(this.isEmpty(login)){
            return;
          }
          var aid = login.aid;
          this.yesS.getSliderImg(
            this.$combineParams({aid:aid})
          ).then(res => {
            var list = res.data.shop_list;
            if(this.isEmpty(list) || list.length <= 0){
              this.listImg = [];
            }else {
              this.listImg = res.data.shop_list[0].sliders;
            }

            if(this.isEmpty(this.listImg) || this.listImg.length <= 0){
              this.listImg[0] = './img/back_img.jpg';
            }
            this.$nextTick(() => {
              var swiper = new Swiper('.swiper-container', {
                pagination: '.swiper-pagination',
                paginationClickable: true,
                loop: true,
                speed: 600,
                autoplay: 4000,
                autoplay: true,
                onTouchEnd: function () {
                  swiper.startAutoplay()
                }
              });
            });
          })
        },
      },
      watch: {
        /*menu_wrapper_status(curVal,oldVal){
        this.menu_wrapper_status = curVal;
      },
      deep:true*/
      }
    }
</script>


<style lang="less">
  .swiper_content{
    width: 100%;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;
  }
  /*//当屏幕大于五百时，宽度设置为固定500*/
  @media screen and (min-width: 700px) {
    .swiper-container{
      width: 700px !important;
    }
  }
  .animate{
    width: 100%;
    line-height: 1.5rem;
    font-size: 0.8rem;
    /*background: #fff;*/
    color: yellow;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    animation: myfirst 50s linear infinite;
    -moz-animation:myfirst 50s linear infinite; /* Firefox */
    -webkit-animation:myfirst 50s linear infinite; /* Safari and Chrome */
    -o-animation:myfirst 50s linear infinite; /* Opera */
  }

  .animate:hover {
    animation-play-state: paused
  }
  .marquee{
    background: rgba(5, 5, 5, 0.1);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    display: flex;
    display: -webkit-flex;
  }
  .marquee img{
    width: 1.5rem;
    height: 1.5rem;
  }

  @keyframes myfirst {
    0%   { text-indent: 27.5em }
    100% { text-indent: -105em }
  }
  .swiper-container {
    width: 100%;
    height: 10rem;
    .swiper-wrapper {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      background-position: center;
      background-size: cover;
      width: 100%;
      height: 100%;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .swiper-pagination-bullet {
      width:0.833rem;
      height: 0.833rem;
      display: inline-block;
      background: #7c5e53;
    }
  }
</style>

